<template>
    <el-popover placement="top" width="260" trigger="click" v-model="visible">
        <div class="i-popover">
            <el-input placeholder="请输入内容" v-model="input" clearable size="mini"></el-input>
            <span @click="onSaveData">保存</span> | <span @click="close">取消</span>
        </div>
        <div slot="reference">{{value}}</div>
    </el-popover>
</template>
<script type="text/javascript">
//通过命名空间的方式映入
import { createNamespacedHelpers } from 'vuex'
//获取需要管理的方法
const { mapState, mapActions, mapMutations } = createNamespacedHelpers('synthesize')
export default {
    name: "tablepopover",
    data() {
        return {
            visible: false,
            input: null, //变值

            finalVal: null //终值
        }
    },
    props: {
        value: [String, Number],
        params: [Array, Object],
        field: [String, Number],
        data: [Array, Object]
    },
    inject: ['field_key'],
    watch: {
        visible: function(newVal, oldVal) {
            if (!newVal) {
                this.input = this.value;
            }
        }
    },
    mounted() {
        this.input = this.value;
        this.finalVal = this.value;
    },
    methods: {
        ...mapActions(['editTableData']),

        /**
         * 保存修改数据
         * @return {[type]} [description]
         */
        onSaveData() {
            if (this.input != '') {
                this.finalVal = this.input;
                this.visible = false;
            }

            var data = {};
            var that = this;

            /**
             * 设置数据
             */
            data[this.field] = this.input;

            for (var key in this.params) {
                data[this.params[key]] = this.data[this.params[key]];
            }

            // console.log('唯一字段', this.field_key);
            this.editTableData({ data: data, key: this.field_key });
        },
        /**
         * 取消
         * @return {[type]} [description]
         */
        close() {
            this.visible = false;
        }
    }
}
</script>
<style type="text/css" lang="scss">
.i-popover {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
}

.i-popover>span {
    width: 50px;
    text-align: center;
    cursor: pointer;
    color: #2D8cF0;
}
</style>